<template>
  <van-nav-bar title="首页" />

  <div class="wrap">
    <van-swipe
      class="my-swipe"
      :autoplay="3000"
      indicator-color="white"
      height="250"
      @change="fn"
    >
      <van-swipe-item>1</van-swipe-item>
      <van-swipe-item>2</van-swipe-item>
      <van-swipe-item>3</van-swipe-item>
      <van-swipe-item>4</van-swipe-item>
    </van-swipe>

    <van-search
      v-model="value"
      placeholder="请输入搜索关键词"
      class="search"
      background="transparent"
      shape="round"
    />
  </div>

  <van-grid>
    <van-grid-item text="每日福利">
      <template #icon>
        <img
          src="../../../assets/images/cat.png"
          alt=""
          style="width: 28px; height: 28px"
        />
      </template>
    </van-grid-item>
    <van-grid-item icon="photo-o" text="文字" />
    <van-grid-item icon="photo-o" text="文字" />
    <van-grid-item icon="photo-o" text="文字" />
  </van-grid>
</template>

<script setup>
import { ref } from "vue";

const value = ref("");

const fn = (index) => {
  console.log(index);
};
</script>

<style lang="less" scoped>
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  background-color: #39a9ed;
}

:deep(.van-swipe__indicator) {
  width: 30px;
  height: 8px;
  background-color: red;
  border-radius: 0;
}

.wrap {
  position: relative;

  .search {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
  }
}

:deep(.van-search__content) {
  background-color: rgba(255, 255, 255, 0.3) !important;
}

:deep(.van-field__control::placeholder) {
  color: #fff;
}
</style>
